{extend name="UserPhoto/myphoto" /}


{block name="addpic"}
<style>
    button{outline:none;}
    .user-label-bottom .user-label-bl ul li:first-child a {
        font-weight: 400;
        /*color: #999;*/
    }

    .user-label-bottom .user-label-bl ul li:nth-child(2) a {
        font-weight: 700;
        color: #000;
    }
    .all-pic{
        margin-top: 15px;
        width: 236px;
    }

    .add-pic{
        height: 130px;
        background: #f6f5f5;
        cursor: pointer;
        text-decoration: none;
        border: 2px dashed #dedede;
    }
    .add-pic:hover{
        background: rgba(255,255,255,.5);
        box-shadow: 0 1px 3px rgba(0,0,0,.3);
    }
    .add-pic i{
        display: block;
        width: 48px;
        height: 48px;
        background: url('/static/home/test/icon_add_rbig.png') 0 0 no-repeat;
        margin: 28px auto 10px;
    }
    .add-pic:hover i{
        background-position: center center;
    }
    .add-pic span{
        color: #999;
    }
    .box {
        float: left;
        width: 236px;
        background: #fff;
    }

    .box .works-info {
        margin-bottom: 0;
        padding: 10px 20px 10px 10px;
        font-size: 13px;
        border-bottom: 1px #ccc solid;
    }

    .box img {
        max-width: 100%
    }

    .box .user-add {
        padding: 0 15px;
        margin: 16px 0;
    }

    .box .add-src {
        font-size: 13px;
        padding: 0 0 0 45px
    }

    .box .add-src a {
        color: #9E7E6B;
    }

    .box .add-src span {
        color: #999;
    }

    .box .user-add a .head-p {
        float: left;
        width: 34px;
        height: 34px;
        border-radius: 50%;
    }

    .box .user-add .add-src p {
        padding: 0 0 0 0;
    }
    .pic-photo .box{
        transition: box-shadow .5s, transform .5s;
    }
    .pic-photo .box:hover {
        cursor: pointer;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
        transform: translate(0, -2px);

    }

    #masonry .pic-photo .box img:first-child:hover {
        opacity: 0.8;
    }

    #userinfo {
        padding: 16px;
    }

    #userinfo a {
        color: #0b0b0b;
    }

    #userinfo .user-name:hover {
        color: red;
    }

    #userinfo .userset {
        background: url('/static/home/test/icon_setting.png') 10px 20px no-repeat;
        display: block;
        width: 35px;
        height: 54px;
        background-color: #fff;
        position: absolute;
        top: 15px;
        right: 12px;
    }



    .add-pic-a a:hover {
        background-color: #F2F2F2
    }

    .add-pic-a a {
        width: 67px;
        height: 50px;
        padding: 5px 0;
        display: inline-block;
        font-size: 12px;
        text-align: center;
        color: #999;
        text-decoration: none;
    }

    .add-pic-a a strong {
        font-size: 15px;
    }

    .add-pic-a a p {
        color: #999;
    }

    .pic-photo .box .add-cj {
        position: absolute;
        z-index: 3;
        top: 6px;
        right: 6px;
        left: 6px;
        display: none;
    }
    .pic-photo .box:hover .add-cj{
        display: block;
    }


    .pic-photo .add-cj .left-btn {
        float: left;
        width: 56px;
    }

    .pic-photo .add-cj .left-btn a {
        display: inline-block;
        line-height: 30px;
        height: 30px;
        width: 56px;
        font-size: 14px;
        background-color: rgb(236, 65, 77);
        border-radius: 3px;
        text-align: center;
        color: #fff;
        text-decoration: none;

    }

    .pic-photo .add-cj .right-btn {
        float: right;
    }

    .pic-photo .add-cj .right-btn button {
        line-height: 30px;
        height: 30px;
        width: 56px;
        font-size: 14px;
        border: none;
        border-radius: 3px;
        background-color: #d9d8d8;
        outline: none;
    }

    .pic-photo .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
    .pic-photo .clearfloat{zoom:1}
    .bootstrap-tagsinput {
        border-radius: 4px;
    }

/*    添加采集模态框*/
    .a-upload {
        padding: 114px 242px;
        height: 20px;
        line-height: 20px;
        position: relative;
        cursor: pointer;
        color: #888;
        background: #fafafa;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
        display: inline-block;
        *display: inline;
        *zoom: 1;
    }

    .a-upload input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer
    }

    .a-upload:hover {
        color: #444;
        background: #eee;
        border-color: #ccc;
        text-decoration: none
    }




</style>
<div class="container-fluid pb50 piclist">
    <div class="add-pic text-center all-pic" id="btn-add" data-toggle="modal" data-target=".bs-example-modal-lg">
        <i></i>
        <span>添加采集</span>
    </div>
</div>



<!-- 添加采集模态框 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content mt100">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">上传采集</h4>
            </div>
            <a href="javascript:" class="a-upload">
                <input type="file" name="file" id="">点击这里上传文件
            </a>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-danger">添加</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<!--采集编辑模态框-->
<div class="modal mt50 fade" id="picedit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">编辑采集</h4>
            </div>

            <form class="form-horizontal">
                <div class="form-group mt20">
                    <label for="inputEmail3" class="col-sm-2 control-label">标签</label>
<!--                    <div class="col-sm-8">-->
<!--                        <input type="text" class="form-control" id="inputEmail3" placeholder="输入文字, 生成标签">-->
<!--                    </div>-->

                    <div class="bq col-sm-8">
                        <div class="tagsinput-primary">
                            <input name="tagsinput"  id="tagsinputval" class="tagsinput form-control" data-role="tagsinput" value=""
                                   placeholder="输入后回车">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">描述</label>
                    <div class="col-sm-8">
                        <textarea class="form-control" rows="3" placeholder="描述这个采集最多225个字"></textarea>
                    </div>
                </div>

                <div class="form-group">
                    <label for="inputEmail3" class="col-sm-2 control-label">所属画板</label>
                    <div class="col-sm-8">
                        <select class="form-control">
                            <option value="">所有画板</option>
                        </select>
                    </div>
                </div>

                <div class="form-group mt20">

                </div>

                <div class="modal-footer">
                    <button class="btn btn-default pull-left">删除采集</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <input type="submit" class="btn btn-primary" value="确认">
                </div>
            </form>


        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>

{/block}

{block name="tupian"}
<script>
    $('#header_top_left_title li a').css({'color': 'black'});
    $('.header_ta').css({'background': '#fff'});
    $('#header_top_left_logo img').attr('src', '/static/home/images/logo.svg');
    $('#header_top_left_title .menu2').css({'background': 'url("/static/home/images/menu_sprite.svg") 0 -248px no-repeat;'});
    $('.search input').css({'background-color': 'rgba(96, 96, 96, 0.2)', 'border': '1px solid #000'});
    $('#rigister').css({'background-color': '#d9d9d9', 'color': '#444'});
    $(function () {
        var $container = $('.piclist');
        $container.imagesLoaded(function () {
            $container.masonry({
                itemSelector: '.all-pic',
                columnWidth: '.all-pic',
                gutter: 14,
                isResizeBound: true,
                isAnimated: true
            });
        });
    });
    var dataInt = {
        'data': [
            {'src': '01c42c37c676b6d621dc4401662f9e4f59437bfa9de1c-88rSRR_fw658.jfif'},
            {'src': '1c3a8df57ff61c8c2c1637f9581d072bad62d93c48c14c-luqPDu_fw658.jfif'},
            {'src': '1c3a8df57ff61c8c2c1637f9581d072bad62d93c48c14c-luqPDu_fw658.jfif'},
            {'src': '1c3a8df57ff61c8c2c1637f9581d072bad62d93c48c14c-luqPDu_fw658.jfif'},
            {'src': '1d6781569238b14290ab5fb8094e3e0b143de28524b07-L9kIQR_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '2ae894133c4e992af6f5b1f7580a6a2223cc8d4016e12-hb9TbY_fw658.jfif'},
            {'src': '3aa49659d3c565fa19485637237a9a6194c95118e6bb-9P8Ofs_fw658.jfif'},
            {'src': '3aa49659d3c565fa19485637237a9a6194c95118e6bb-9P8Ofs_fw658.jfif'},
            {'src': '3aa49659d3c565fa19485637237a9a6194c95118e6bb-9P8Ofs_fw658.jfif'},
            {'src': '6a34a45452a66b9eb0dbadfd81c09a006d4d60e711e31a-bxBaiz_fw658.png'},
            {'src': '6a34a45452a66b9eb0dbadfd81c09a006d4d60e711e31a-bxBaiz_fw658.png'},
            {'src': '6a34a45452a66b9eb0dbadfd81c09a006d4d60e711e31a-bxBaiz_fw658.png'}
        ]
    };
    window.onload = function () {
        for (i = 0; i < dataInt['data'].length; i++) {
            var $pic_photo =(
                '<div class="pic-photo all-pic">' +
                '<div class="box">' +
                '<img src="' + '/static/home/test/' + dataInt.data[i]['src'] + '">' +
                '<div class="add-cj clearfloat">' +
                '<div class="left-btn">' +
                '<a href="">采集</a>' +
                '</div>' +
                '<div class="right-btn">' +
                '<button class="" data-toggle="modal" data-target="#picedit">编辑</button>' +
                '</div>' +
                '</div>' +
                '<div class="user-add">' +
                '<a href=""><img class="head-p" src="/static/home/test/tx1.jfif"></a>' +

                '<div class="add-src">' +
                '<a href="">一giao我嘞giao用户</a>&nbsp;&nbsp;<span>采集到</span>' +
                '<a href="">画板名</a>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>');

            $('.piclist').append($pic_photo);
        }

        var $grid = $('.piclist').masonry({
            itemSelector: '.all-pic',
            columnWidth: '.all-pic',
            percentPosition: true,
        });

        $grid.imagesLoaded().progress(function () {
            $grid.masonry('layout');
        });
    };






</script>

{/block}
